<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档流</title>
    <style>
        .box1, .box2, .box3 {
            /* width: 200px; */
            height: 200px;
        }
        .box1 {
            background-color: blue;
        }
        .box2 {
            background-color: orange;
        }
        .box3 {
            background-color: pink;
        }
        span {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- 
        文档流:  normal flow 
            网页多层结构, 文档流最低一层, 文档流中的元素, 遵循文档流规则, 元素特征

        块元素:
            宽度默认为auto, 撑开包含块, 高度由内容撑开
        行内元素:
            宽度由内容撑开, 自动换行
     -->


</body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 我是一个span</span>
    <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 我是一个span</span><span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 我是一个span</span>
    <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 我是一个span</span>
</html>